<template>
  <div class="record-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group inset v-for="record in records" :key="record.id">
          <van-cell :title="getRecordTypeText(record.recordType)">
            <template #value>
              <span :class="getValueClass(record)">
                {{ formatValue(record) }}
              </span>
            </template>
            <template #label>
              <div class="record-info">
                <span class="record-time">{{ formatDateTime(record.recordTime) }}</span>
                <van-button 
                  size="small" 
                  type="danger"
                  @click="handleDelete(record.id)"
                >
                  删除
                </van-button>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showConfirmDialog, showToast } from 'vant'
import { getHealthRecordsList, deleteHealthRecord } from '@/api/health'

const props = defineProps({
  type: {
    type: Number,
    default: null
  }
})

const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const current = ref(1)
const records = ref([])

const recordTypeMap = {
  1: '体重',
  2: '血压'
}

const getRecordTypeText = (type) => recordTypeMap[type] || '未知'

const formatValue = (record) => {
  if (record.recordType === 1) {
    return `${record.recordValue}kg`
  } else if (record.recordType === 2) {
    return `${record.recordValue}mmHg`
  }
  return record.recordValue
}

const getValueClass = (record) => {
  return {
    'weight-value': record.recordType === 1,
    'bp-value': record.recordType === 2
  }
}

const formatDateTime = (time) => {
  return new Date(time).toLocaleString('zh-CN', {
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const onLoad = async () => {
  try {
    const { data } = await getHealthRecordsList({
      current: current.value,
      size: 10,
      type: props.type
    })

    if (refreshing.value) {
      records.value = []
      refreshing.value = false
    }

    records.value.push(...data.records)
    current.value++
    loading.value = false

    if (data.records.length < 10) {
      finished.value = true
    }
  } catch (error) {
    showToast('获取记录失败')
    loading.value = false
  }
}

const onRefresh = () => {
  finished.value = false
  current.value = 1
  onLoad()
}

const handleDelete = (id) => {
  showConfirmDialog({
    title: '提示',
    message: '确定要删除这条记录吗？'
  }).then(async () => {
    try {
      await deleteHealthRecord(id)
      showToast('删除成功')
      onRefresh()
    } catch (error) {
      showToast('删除失败')
    }
  })
}
</script>

<style lang="scss" scoped>
.record-list {
  .record-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }

  .record-time {
    color: #999;
    font-size: 12px;
  }

  .weight-value {
    color: #1989fa;
  }

  .bp-value {
    color: #ee0a24;
  }
}
</style> 